<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-table th {
        text-align: center;
    }

    .layui-table td {
        text-align: center;
    }

    .layui-input-block {
        margin-left: 75px;
    }

    .chooseVideo .layui-form-label {
        width: 62px;
        padding: 9px 5px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible;
    }

    td .layui-table-cell {
        height: auto;
        line-height: 30px;
        /* height: 120px; */
        text-align: left;
    }

    .layui-table img {
        max-width: 100%;
    }

    .layer-photos {
        cursor: pointer;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }
</style>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">素材管理</a>
            <a><cite>素材列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">素材ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="material_id" placeholder="请输入素材ID" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">素材名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入素材名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" id="dataTime">
                    <label class="layui-form-label w-auto">日期：</label>
                    <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                        <div class="layui-input-inline" style="margin-right:10px">
                            <input type="text" class="layui-input" name="start_date" id="start_time" autocomplete="off"
                                placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="end_date" id="end_time" autocomplete="off"
                                placeholder="结束日期">
                        </div>
                    </div>
                </div>

                <button class="layui-btn" lay-submit lay-filter="searchListNew">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>

        <table id="material" lay-filter="material"></table>
    </div>
    <script>

        let cols = [//表头
            {
                field: 'cover_url', title: '封面图片', align: 'center', width: 110, templet: function (d) {
                    if (d.cover_url) {
                        return `<div class="layer-photos"  style="cursor:pointer;height: 100%;">
                                <img onclick="showimg(this)" style="height: 100%;" src=`+ d.cover_url + ` alt="">
                            </div>`;
                    } else {
                        return `<div>暂无照片</div>`
                    }
                }
            }
            , {
                title: '素材信息', width: 410, templet: function (d) {
                    if (d.video_url) {
                        return `
                        <div class="layer-photos"  style="cursor:pointer;height: 100%; float:left;margin:10px ">
                            <video style="height: 180px;" src=`+ d.video_url + ` controls="controls"></video>
                        </div>
                        <div >
                            <div>名称：${d.title}</div>
                            <div>素材ID：${d.material_id}</div>
                            <div>关联计划数：${d.related_ad_cnt} 关联创意数：${d.related_creative_cnt} <br>
                                关联广告数：${d.related_promotion_cnt}</div>
                            <div>视频时间：${d.video_time}</div>
                            <div>创建时间：${d.created_at}</div>
                        </div>
                        `
                    } else {
                        return `
                            <div>名称：${d.title}</div>
                            <div>素材ID：${d.material_id}</div>
                            <div>关联计划数：${d.related_ad_cnt} 关联创意数：${d.related_creative_cnt} <br>
                                关联广告数：${d.related_promotion_cnt}</div>
                            <div>视频时间：${d.video_time}</div>
                            <div>创建时间：${d.created_at}</div>
                        `
                    }
                }
            }
            , {
                field: 'today_stat_cost',title: '消耗', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_stat_cost}</div>
                    return `
                        <div>今日：${d.today_stat_cost}</div>
                        <div>总：${d.count_stat_cost}</div>
                    `
                }
            }
            , {
                field: 'today_show_cnt',title: '展示数', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_show_cnt}</div>
                    return `
                        <div>今日：${d.today_show_cnt}</div>
                        <div>总：${d.count_show_cnt}</div>
                    `
                }
            }
            , {
                field: 'today_click_cnt',title: '点击数', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_click_cnt}</div>
                    return `
                        <div>今日：${d.today_click_cnt}</div>
                        <div>总：${d.count_click_cnt}</div>
                    `
                }
            }
            , {
                field: 'today_ctr',title: '点击率', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_ctr}%</div>
                    return `
                        <div>今日：${d.today_ctr}%</div>
                        <div>总：${d.count_ctr}%</div>
                        `
                }
            }
            , {
                field: 'today_active_cost',title: '激活成本', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_active_cost}</div>
                    return `
                        <div>今日：${d.today_active_cost}</div>
                        <div>总：${d.count_active_cost}</div>
                        `
                }
            }
            , {
                field: 'today_active',title: '激活数', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_active}</div>
                    return `
                        <div>今日：${d.today_active}</div>
                        <div>总：${d.count_active}</div>
                        `
                }
            }
            , {
                field: 'today_cpc_platform',title: '平均客单价', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_cpc_platform}</div>
                    return `
                    <div>今日：${d.today_cpc_platform}</div>
                    <div>总：${d.count_cpc_platform}</div>
                    `
                }
            }
            , {
                field: 'today_conversion_cost',title: '平均转化成本', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_conversion_cost}</div>
                    return `
                    <div>今日：${d.today_conversion_cost}</div>
                    <div>总：${d.count_conversion_cost}</div>
                    `
                }
            }
            , {
                field: 'today_convert_cnt', title: '转化数', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_convert_cnt}</div>
                    return `
                    <div>今日：${d.today_convert_cnt}</div>
                    <div>总：${d.count_convert_cnt}</div>
                    `
                }
            }
            , {
                field: 'today_conversion_rate', title: '转化率', sort: true, templet: function (d) {
                    //<div>昨日：${d.yesterday_conversion_rate}%</div>
                    return `
                    <div>今日：${d.today_conversion_rate}%</div>
                    <div>总：${d.count_conversion_rate}%</div>
                    `
                }
            }
        ];

        layui.use(['form', 'table', 'soulTable', 'laydate'], function () {
            var table = layui.table,
                soulTable = layui.soulTable;
            var laydate = layui.laydate;
            var form = layui.form;
            table.render({
                elem: '#material'
                , url: '/cps/material/list'
                , page: true
                , headers: {
                    token
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                }
                , height: 800
                , totalRow: true
                , even: true //开启隔行背景
                , method: "post"
                , parseData: function (res) {
                    if (res.code == 200) {
                        total_data = res.data.total_data;
                        return {
                            "data": res.data.data, //解析数据列表
                            "code": res.code, //解析接口状态
                            'count': res.data.total//解析数据长度
                        }
                    } else {
                        return {
                            "data": [], //解析数据列表
                            "code": 200, //解析接口状态
                            'count': 0//解析数据长度
                        }
                    }
                }
                , cols: [[
                    ...cols
                ]]
            });
            // 监听表格排序事件
            table.on('sort(material)', function(obj){
                // 获取排序字段和排序类型
                var field = obj.field;
                var type = obj.type; // 'asc' 或者 'desc'
            
                // 根据排序字段和类型构造排序参数
                /*  var sort = field + ' ' + type;
                console.log(sort);*/
                // 重新调用接口获取数据
                table.reload('material', {
                initSort: obj // 记录排序参数，用于页面刷新后恢复排序状态
                ,where: {
                    sort: field, // 将排序参数发送到服务器
                    orderby:type
                }
                });
            })
            form.on('submit(searchListNew)', function (data) {
                table.reload('material', {
                    where: data.field
                })
                return false
            });
        });

        layui.use('table', function () {
            var table = layui.table;
            table.on('tool(video)', function (obj) {
                var event = obj.event;
            });

        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#dataTime',
                range: ['#start_time', '#end_time'],
                format: 'yyyy-MM-dd'
            });
        })
    </script>

</body>

</html>